<template>
    <div class="page-container">
        <WarningDialog
                v-model="showWarn"
                title="提示"
                :message="warnMsg"
        />

        <!-- Header 文案 + 日期筛选 -->
        <div class="header">
            <h2 class="title">抖音项目分析</h2>

            <div class="search-area">
                <!-- ✅ 使用共享日期组件 -->
                <DateRangeSelector
                        @update="handleDateParams"
                        @search="search"
                />
            </div>
        </div>

        <!-- 卡片区域 -->
        <div class="card-grid">
            <div
                    v-for="item in cards"
                    :key="item.id"
                    class="data-card"
                    :style="isMobile ? {} : { flex: item.size }"
            >
                <div class="card-title">{{ item.title }}</div>
                <div class="card-value">{{ item.value }}</div>
            </div>
        </div>


        <!-- 折线图部分 -->
        <div>
            <TrendLineChart
                    title="抖音整体趋势"
                    :mock="true"
                    :trend-data="zhengTiTrendData"
                    :trend-lines="trendLines"
                    :color-map="trendLinesColorMap"
            />

        </div>


        <!-- ✅ 店铺看板列表 -->
        <div class="store-list">

            <StoreDashboard
                    v-for="(shopValue, shopName) in allShopDatas"
                    :key="shopName"
                    :store-name="shopName"
                    :kpi-data="shopValue.kpiData"
                    :trend-data="shopValue.trendData"
                    :sections="shopValue.selfCoopDetails"
                    :start_end_date="start_end_date"
            />
        </div>



    </div>
</template>

<script setup>
    import {ref, computed, onMounted, watch } from "vue";
    import dayjs from "dayjs"
    // ✅ 引入公共组件
    import DateRangeSelector from "../components/DouyinProjectAnalysis/DateRangeSelector.vue"
    import TrendLineChart from "../components/DouyinProjectAnalysis/TrendLineChart.vue"
    import StoreDashboard from "../components/DouyinProjectAnalysis/StoreDashboard.vue" // ✅ 引入店铺组件
    import WarningDialog from '../components/DouyinProjectAnalysis/WarningDialog.vue'



    import api from "../api";
    const isMobile = computed(() => window.innerWidth <= 768);


    //总看板数据
    const zong_kan_ban_datas = ref({})

    // 接收日期筛选参数
    const dateParams = ref({})

    const start_end_date = ref({})

    // 共享组件回调
    const handleDateParams = (params) => {
        console.log(`共享组件回调 ${params}`)
        dateParams.value = params
    }

    //整体成交  的折线图
    const  zhengTiTrendData=ref({
        days: [],
        pay: [],
        refund: [],
        discount: []
    })

    const trendLines = ref([
        { key: "pay", label: "支付金额", visible: true },
        { key: "refund", label: "退款金额", visible: false },
        { key: "discount", label: "千川消耗", visible: false }
    ])
    const trendLinesColorMap = {
        pay: "#4472c4",      // 支付金额 蓝色
        refund: "#70ad47",   // 退款金额 深灰
        discount: "#ed7d31"  // 千川消耗 青黄
    }

    const showWarn = ref(false)
    const warnMsg = ref('')

    const openWarn = (message) => {
        warnMsg.value = message
        showWarn.value = true
    }


    // 模拟卡片数据
    const cards = ref([
        { id: 1, title: "支付金额", value: "0", size: 1 },
        { id: 2, title: "退款金额", value: "0", size: 1 },
        { id: 3, title: "签收率", value: "0", size: 0.5 },
        { id: 4, title: "千川消耗", value: "0", size: 1 },
        { id: 5, title: "ROI", value: "0", size: 0.5 },
        { id: 6, title: "人工成本", value: "0", size: 1 },
        { id: 7, title: "业务利润", value: "0", size: 1 },
        { id: 8, title: "利润率", value: "0", size: 0.5 },
    ])

    // 搜索执行函数
    const search = () => {
        const {
            type,
            dateRange,
            startDate,
            endDate,
            monthRange,
            startMonth,
            endMonth
        } = dateParams.value

        console.log("接收到的筛选参数: ", dateParams.value)

        let star_parm = ""
        let end_parm = ""

        if (type === "date") {
            const start = startDate || dateRange?.[0]
            const end = endDate || dateRange?.[1]
            if (!start || !end) {
                openWarn("请选择日期范围！")
                return
            }
            star_parm = dayjs(start).format("YYYY-MM-DD")
            end_parm = dayjs(end).format("YYYY-MM-DD")


        } else {
            const start = startMonth || monthRange?.[0]
            const end = endMonth || monthRange?.[1]
            if (!start || !end) {
                openWarn("请选择月份范围！")
                return
            }
            star_parm = dayjs(start).format("YYYY-MM")
            end_parm = dayjs(end).format("YYYY-MM")
        }
        start_end_date.value={"start":star_parm,"end":end_parm,"type":type}
        handleSearch(type,star_parm,end_parm)
    }

    const allShopDatas=ref({})
    const handleSearch = async (date_or_month,star_parm,end_parm) => {
        console.log(`date_or_month:${date_or_month} star_parm:${star_parm} end_parm:${end_parm}`)
        // 可在这里请求后端接口，更新趋势数据
        const res = await api.post("/douyin_project_analysis/index_datas", {
            date_or_month: date_or_month,
            star_parm:star_parm,
            end_parm:end_parm
        });
        cards.value=res.data.zong_kan_ban_datas;
        zhengTiTrendData.value=res.data.zheng_ti_cheng_jiao_line_datas;
        allShopDatas.value=res.data.shop_datas;
    }



    onMounted(() => {

        const default_start_parm = dayjs().format('YYYY-MM');
        const default_end_parm   = default_start_parm;
        const default_type="month";
        start_end_date.value={"start":default_start_parm,"end":default_end_parm,"type":default_type}
        handleSearch(default_type,default_start_parm,default_end_parm)
    })







</script>

<style scoped>
    .store-list {
        display: flex;
        flex-direction: column;
        gap: 40px; /* ✅ 每个店铺间距 */
        margin-top: 50px;
    }



    .page-container {
        width: 90%;
        max-width: 1800px; /* 桌面端居中显示 */
        margin: 0 auto;
        padding: 16px;
        box-sizing: border-box;
    }

    /* Header */
    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 28px; /* 更舒适间距 */
    }

    .title {
        font-size: 26px;
        font-weight: bold;
    }

    .search-area {
        display: flex;
        gap: 14px;
        align-items: center;
    }

    /* 卡片网格布局 */
    .card-grid {

        display: flex;
        width: 100%;
        gap: 18px;
        overflow-x: auto;
        justify-content: space-between;
    }

    .data-card {
        background: #f6f8ff;
        border: 1px solid #bcd3ff;
        border-radius: 10px;
        padding: 12px 16px; /* ✅左对齐且有内边距 */
        box-shadow: 0 2px 6px rgba(140, 160, 255, 0.18);
        display: flex;
        flex-direction: column;
        justify-content: center;
        transition: 0.25s;
        min-height: 110px;
        width: 100%;
        box-sizing: border-box;
    }

    /* Hover 间距变化体验更高级 */
    .data-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 12px rgba(100, 140, 255, 0.25);
    }

    .card-title {
        font-size: 16px;
        font-weight: 600;
        color: #000000;
        margin-bottom: 16px;
        text-align: left;
    }

    .card-value {
        font-size: 24px;
        font-weight: bold;
        color: #000000;
        text-align: left;
    }










    /* 手机适配 */
    @media (max-width: 768px) {

        .page-container {
            max-width: 95%;
            padding: 12px;
        }

        /* 表单按钮全宽 */
        .search-area {
            flex-direction: column;
            width: 100%;
        }


        /* 卡片栅格：单列 */
        .card-grid {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .data-card {
            width: 100%;
            box-sizing: border-box;
        }

        .header {
            flex-direction: column;
            align-items: flex-start;
            gap: 12px;
        }


        /*.data-card {*/
        /*    flex: 1 1 calc(50% - 18px);*/
        /*}*/

        .data-card {
            padding: 14px 18px;
        }

        .card-title {
            font-size: 15px;
        }

        .card-value {
            font-size: 22px;
        }


    }

    @media (max-width: 480px) {
        .card-grid {
            /*grid-template-columns: repeat(1, 1fr);*/
            flex: 1 1 100%;
        }
    }
</style>
